<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('下拉框')"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<body>
<div class="row" style="padding: 20px;">
    <form id="radio">
        <input type="hidden" name="deptId" th:value="${dept.deptId}">
        <div class="col-sm-12">
            <label class="col-sm-12 control-label">部门名称：</label>
            <div class="col-sm-12">
                <input type="text" name="deptName" class="form-control" readonly="readonly" th:value="${dept.deptName}">
            </div>

        </div>
        <div class="col-sm-12" style="padding-top: 10px">
            <label class="col-sm-12 control-label">分配名称：</label>
            <div class="col-sm-12">
                <select name="role" class="form-control select2-multiple" multiple>
                    <option th:each="roles : ${roles}" th:text="${roles.roleName}"
                            th:value="${roles.roleId}" th:selected="${roles.flag}"></option>
                </select>
            </div>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: select2-js"/>
<th:block th:include="include :: bootstrap-select-js"/>
<script th:inline="javascript">
    var prefix = ctx + "system/dept"

    function submitHandler() {
        var data = $("#radio").serializeArray();
        var roles = $("select[name='role']").val();
        data.push({"name": "roles", "value": roles});
        if (roles == null) {
            $.modal.alertWarning('请选择需要分配的角色！');
            return false
        }
        $.operate.save(prefix + "/assignRoles", data);

    }
</script>
</body>
</html>